import styles from "@styles/search.module.less";
import GeekIcon from "@shared/geekIcon";
import React from "react";
import HistoryItem from "@pages/search/widgets/historyItem";
import { useTypedDispatch, useTypedSelector } from "@store/index";
import { clearHistory, historySelector } from "@slice/history";

export default function History() {
  const historyKeys = useTypedSelector(historySelector.selectAll);
  const dispatch = useTypedDispatch();
  return (
    <ul className={styles.history}>
      <li>
        历史记录
        <GeekIcon
          type={"iconbtn_del"}
          onClick={() => dispatch(clearHistory())}
        />
      </li>
      {historyKeys.map((item) => (
        <HistoryItem key={item.id} item={item} />
      ))}
    </ul>
  );
}
